<template>
  <div class="warehouse-container">
    <!-- 显示 -->
    <el-card shadow="always">
      <!-- 第一行，按钮（添加仓库）和搜索框 -->
      <el-row :gutter="24">
        <!-- 按钮，添加仓库 -->
        <el-col :span="18">
          <el-button
            type="primary"
            size="small"
            @click="showDrawer()"
          >添加仓库</el-button>
        </el-col>
        <!-- 输入框，搜索表格内容 -->
        <el-col :span="6">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            size="small"
            @keyup.enter.native="getList()"
          />
        </el-col>
      </el-row>

      <!-- 第二行，表格显示仓库信息 -->
      <el-table size="small" :data="list" style="width: 100%; margin: 15px 0px">
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <!-- 跑马灯，展示仓库图片 -->
            <el-carousel :interval="3000" type="card" height="200px">
              <el-carousel-item v-for="item in row.image" :key="item.id">
                <el-image :src="item.url" fit="fill" />
              </el-carousel-item>
            </el-carousel>

            <!-- form表单，显示仓库管理人信息 -->
            <el-form inline label-width="60px">
              <el-form-item label="联系人">
                <span>{{
                  row.contact + "（" + (row.sex ? "先生" : "女士") + "）"
                }}</span>
              </el-form-item>
              <el-form-item label="电话">
                <span>{{ row.telephone }}</span>
              </el-form-item>
              <el-form-item label="备注">
                <span>{{ row.others }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 表格字段 -->
        <el-table-column prop="id" label="仓库ID" align="center" width="100px" />
        <el-table-column
          prop="name"
          label="仓库名称"
          align="center"
        />
        <el-table-column
          label="仓库地址"
          align="center"
        ><template slot-scope="{ row }">
          {{ row.a1 + row.a2 + row.a3 + row.a4 }}
        </template></el-table-column>
        <!-- 仓库状态 -->
        <el-table-column label="状态" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="tagType(row)">{{
              row.flag ? "启用" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 仓库操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看仓库xx"
              placement="bottom"
            >
              <el-button icon="el-icon-search" circle @click="detail(row)" />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改仓库信息"
              placement="bottom"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="modify(row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改区、位信息"
              placement="bottom"
            >
              <el-button
                icon="el-icon-menu"
                type="success"
                circle
                @click="modifyPosition(row)"
              />
            </el-tooltip>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="删除仓库信息"
              placement="bottom"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteItem(row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 对话框1，显示仓库区、位信息 -->
      <DialogForm ref="dialogForm" @getList="getList()" />
      <!-- 抽屉1，添加|修改品牌信息 -->
      <Drawer ref="drawer" @getList="getList()" />
      <!-- 抽屉2，修改仓库区、位信息 -->
      <DrawerPosition ref="drawerPosition" @getList="getList()" />
    </el-card>
  </div>
</template>

<script>
import DialogForm from '@/views/information/warehouse/components/DialogForm'
import Drawer from '@/views/information/warehouse/components/Drawer'
import DrawerPosition from '@/views/information/warehouse/components/DrawerPosition'

export default {
  name: 'Warehouse',
  components: {
    DialogForm,
    Drawer,
    DrawerPosition
  },
  data() {
    return {
      // 仓库信息列表
      list: [],
      // 关键字
      input: ''
    }
  },
  mounted() {
    // 获取仓库信息
    this.getList()
  },
  methods: {
    // 添加仓库
    showDrawer() {
      // 调用子组件添加单位方法，显示右侧弹窗
      this.$refs.drawer.dialogFormOn()
    },
    // 获取仓库信息列表
    async getList() {
      const response = await this.$API.warehouse.get()
      if (response.code === 200) {
        // 保存数据
        this.list = response.data
      } else {
        // 数据获取失败，弹窗提醒
        this.$message.error(response.msg)
      }
    },
    // 返回tag的type
    tagType(row) {
      return row.flag ? 'success' : 'danger'
    },
    // 弹窗显示仓库区、位等详细信息
    async detail(row) {
      // 调用接口获取该仓库区、位信息
      const response = await this.$API.warehouse.getDetail(row.id)
      if (response.code === 200) {
        // 获取库、位信息成功，保存数据到子组件
        this.$refs['dialogForm'].list = response.data
        // 调用子组件添加单位方法，显示弹窗
        this.$refs['dialogForm'].dialogOn(row)
      }
    },
    // 修改仓库信息
    modify(row) {
      // 调用子组件添加单位方法，显示右侧弹窗
      this.$refs.drawer.dialogFormOn()
      // 修改子组件dialogForm内容
      this.$nextTick(async() => {
        this.$refs['drawer'].dialogForm = { ...row }
        // bug-fixed：修改仓库信息时，地址的下拉框无数据（不能直接调用getA2List，因为会将value删除）
        const responseA2 = await this.$API.customer.district(row.a1)
        this.$refs['drawer'].a2List = JSON.parse(responseA2.data).districts[0].districts

        const responseA3 = await this.$API.customer.district(row.a2)
        this.$refs['drawer'].a3List = JSON.parse(responseA3.data).districts[0].districts
      })
    },
    // 删除仓库信息
    deleteItem(row) {
      this.$confirm('此操作将永久删除该仓库信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const response = await this.$API.customer.deleteWarehouse(row.id)
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 重新拉取仓库信息
          this.getList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改仓库区、位信息
    async modifyPosition(row) {
      const response = await this.$API.warehouse.getDetail(row.id)
      if (response.code === 200) {
        // 修改子组件dialogForm内容
        this.$nextTick(() => {
          // 调用子组件添加单位方法，显示右侧弹窗
          this.$refs['drawerPosition'].dialogFormOn()
          // 仓库id
          this.$refs['drawerPosition'].id = row.id
          // 区、位信息
          this.$refs['drawerPosition'].list = response.data
        })
      } else {
        // 提醒获取仓库区位信息失败
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.warehouse {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

// 展开行样式
<style>
.demo-table-expand {
  font-size: 0px;
}
.demo-table-expand label {
  font-weight: 400;
  font-size: 14px;
  margin-left: 15px;
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>

// 跑马灯样式
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
